<template>
  <div class="wty-content-recommend">
    <div class="wty-content-recommend-wrapper">
      <div class="wty-content-recommend-header">
        <h2>猜你喜欢</h2>
        <p>为你甄选最适合的</p>
      </div>
      <div class="wty-content-recommend-content">
        <div class="wty-item-wrapper">
          <router-link to="/shop">
            <div
            class="wty-recommend-good"
            v-for="(good, index) in googList"
            :key="index"
          >
            <div class="wty-good-img">
              <img :src="good.src" alt />
            </div>
            <h3 class="wty-good-name">{{ good.name }}</h3>
            <div class="wty-good-evaluate">
              <el-rate
                class="wty-good-rate-star"
                v-model="good.rate"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              ></el-rate>
              <span class="wty-rate-count">{{ good.count }}个评价</span>
            </div>
            <div class="wty-good-addr">{{ good.addr }}</div>
            <div class="wty-good-price">
              <span class="wty-good-price-symbol">￥</span>
              <span class="wty-good-price-value">{{ good.price }}</span>
              <span class="wty-good-price-text">起</span>
            </div>
          </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Axios from "axios";
export default {
  data() {
    return {
      googList: []
    };
  },
  created() {
    let url = "http://192.168.101.74:9000/goodList";
    Axios.get(url).then(resp => {
      this.googList = resp.data;
    });
  }
};
</script>

<style lang="scss">
.wty-content-recommend {
  width: 100%;
  margin-top: 40px;
  .wty-content-recommend-wrapper {
    width: 1190px;
    margin: 0 auto;
    background-color: #ffffff;
    .wty-content-recommend-header {
      width: 1190px;
      height: 44px;
      background: rgb(88, 174, 221)
        linear-gradient(to right, rgb(88, 174, 221) 2%, rgb(66, 191, 205) 97%)
        repeat scroll 0% 0%;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      display: flex;
      color: white;
      h2 {
        font-size: 18px;
        margin-left: 13px;
        margin-right: 10px;
        display: flex;
        align-items: center;
      }
      p {
        font-size: 14px;
        display: flex;
        align-items: center;
      }
    }
    .wty-content-recommend-content {
      padding: 10px;
      box-sizing: border-box;
      font-size: 0;
      .wty-item-wrapper {
        .list-enter-active,
        .list-leave-active {
          transition: all 1s;
        }
        .wty-recommend-good {
          width: 234px;
          box-sizing: border-box;
          display: inline-block;
          padding: 10px;
          background-color: white;
          border-radius: 4px;
          cursor: pointer;
          transition: all 0.5s;
          &:hover {
            background-color: rgba($color: #f8f8f8, $alpha: 1);
          }

          .wty-good-img {
            width: 214px;
            overflow: hidden;
            img {
              width: 214px;
              border-radius: 4px;
              transition: all 0.5s;
              &:hover {
                transform: scale3d(1.2, 1.2, 0);
              }
            }
          }
          .wty-good-name {
            font-size: 16px;
            line-height: 22px;
            width: 100%;
            height: 22px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            margin-top: 5px;
          }
          .wty-good-evaluate {
            display: flex;
            .wty-good-rate-star .el-rate__icon {
              font-size: 12px;
              margin-right: 3px;
              height: 24px;
              line-height: 24px;
              .el-rate__decimal {
                line-height: 24px;
                height: 24px;
              }
            }
            .wty-rate-count {
              font-size: 12px;
              color: #999;
              height: 24px;
              line-height: 24px;
              margin-left: 10px;
            }
          }
          .wty-good-addr {
            font-size: 12px;
            color: #999999;
            width: 100%;
            height: 18px;
            line-height: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-top: 4px;
          }
          .wty-good-price {
            color: #ff6600;
            .wty-good-price-symbol {
              font-size: 14px;
              font-weight: 700;
            }
            .wty-good-price-value {
              font-size: 22px;
            }
            .wty-good-price-text {
              font-size: 12px;
              margin-left: 4px;
              font-weight: 700;
            }
          }
        }
      }
    }
  }
}
</style>
